<template>
  <div ref="myEcharts" class="w-[calc(35%-20px)] h-[400px]"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref, reactive, watch, onUnmounted } from 'vue'
import { xDataList } from '../index'
import { getCommonKmSummaryChart } from '/@/api/teacher'
const myEcharts = ref<any>()

let chartDivInit: any = {}
const Data: any = reactive({
  rate: 0,
  option: {},
  angle: 0,
  dataCount: 100,
})

Data.option = {
  title: {
    text: '百分制成绩分布图',
    textStyle: {
      color: '#fff',
    },
  },
  toolbox: {},
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    left: '2%',
    right: '1%',
    bottom: '8%',
    top: '10%',
    containLabel: true,
  },
  xAxis: {
    data: xDataList,
    silent: false,
    splitLine: {
      show: false,
    },
    splitArea: {
      show: false,
    },
    axisLine: {
      onZero: false,
    },
    axisLabel: {
      show: true,
      interval: 1,
      rotate: 90,
      fontSize: 10,
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: [
    {
      splitLine: {
        show: true,
        lineStyle: {
          color: '#535353',
        },
      },
      minInterval: 1,
      splitArea: {
        show: false,
      },
    },
    {
      splitLine: {
        show: true,
        lineStyle: {
          color: '#535353',
        },
      },
      splitArea: {
        show: false,
      },
      axisLabel: {
        formatter: '{value}%',
      },
    },
  ],
  series: [
    {
      name: '成绩分布',
      type: 'bar',
      data: [],
      large: true,
      style: {
        color: '#F37723',
      },
    },
    {
      name: '成绩占比',
      type: 'bar',
      yAxisIndex: 1,
      data: [],
      large: true,
      style: {
        color: '#F37723',
      },
    },
  ],
  backgroundColor: '#2c343c',
  legend: {
    data: ['成绩分布', '成绩占比'],
    left: 'center',
    top: 'bottom',
    textStyle: {
      color: '#fff',
    },
  },
}
const props = defineProps({
  zpDataFlag: {
    type: Boolean,
    default: false,
  },
  kmdm: {
    type: String,
    default: '',
  },
  infoList: {
    type: Array,
    default: () => [],
  },
} as any)

watch(
  () => props.infoList,
  async () => {
    if (!props.kmdm) {
      Data.option.xAxis.data = xDataList
      Data.option.series[0].data = []
      Data.option.series[1].data = []
      chartDivInit.setOption && chartDivInit?.setOption(Data.option)
      chartDivInit?.resize && chartDivInit?.resize()
      return
    }
    const { data, code } = await getCommonKmSummaryChart({
      kmdm: props.kmdm,
      zpDataFlag: props.zpDataFlag,
    })
    if (code === 200) {
      Data.option.xAxis.data = data.x1
      Data.option.series[0].data = data.y1
      Data.option.series[1].data = data.y2
      chartDivInit?.setOption(Data.option)
      chartDivInit?.resize()
    }
  },
  {
    immediate: true,
    deep: true,
  }
)

onMounted(async () => {
  chartDivInit = echarts.init(myEcharts.value)
  chartDivInit?.setOption(Data.option)
  window.onresize = () => {
    chartDivInit?.resize()
  }
})
onUnmounted(() => {
  window.onresize = null
})
</script>
